<template>
  <div class="app-container">
    <template v-if="patchInfo">
      <div v-if="section === 'basic'" class="info-section">
        <!-- 基本信息 -->
        <div class="image-container">
          <el-image
            v-if="imageList.patchImage.length"
            :src="imageList.patchImage[0]"
            class="patch-image"
            :preview-src-list="imageList.patchImage"
          ></el-image>
        </div>
        <p>
          <strong style="color: #0037ff; font-size: 20px">批次描述:</strong
          >{{ patchInfo.patchDescription }}
        </p>
        <!-- 其他字段... -->
      </div>

      <div v-else-if="section === 'zhongmiao'" class="info-section">
        <!-- 种苗繁育信息 -->
        <div class="image-container">
          <el-image
            v-if="imageList.zhongmiaoImage.length"
            :src="imageList.zhongmiaoImage[0]"
            class="patch-image"
            :preview-src-list="imageList.zhongmiaoImage"
          ></el-image>
        </div>
        <p>
          <strong style="color: #0037ff; font-size: 20px">繁育任务名称:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoManagementName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗描述:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoDescription }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗名称:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoDisplayName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗采购日期:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoPurchaseDate }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗来源:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoSourceLocation }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗单位:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoSourceUnit }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗时间:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoTime }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗类型:</strong
          >{{ patchInfo.zhongmiao.zhongMiaoType }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">种苗备注:</strong
          >{{ patchInfo.zhongmiao.remark }}
        </p>
      </div>

      <div v-else-if="section === 'zaipei'" class="info-section">
        <!-- 栽培信息 -->
        <div class="image-container">
          <el-image
            v-if="imageList.zaipeiImage.length"
            :src="imageList.zaipeiImage[0]"
            class="patch-image"
            :preview-src-list="imageList.zaipeiImage"
          ></el-image>
        </div>
        <p>
          <strong style="color: #0037ff; font-size: 20px">管理任务名称:</strong
          >{{ patchInfo.zaipei.zaiPeiManagementName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培展示名称:</strong
          >{{ patchInfo.zaipei.zaiPeiDisplayName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培高度:</strong
          >{{ patchInfo.zaipei.zaiPeiAltitude }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培种苗来源:</strong
          >{{ patchInfo.zaipei.zaiPeiSeedlingSource }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培荫蔽度:</strong
          >{{ patchInfo.zaipei.zaiPeiShadeDegree }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培温度:</strong
          >{{ patchInfo.zaipei.zaiPeiTemperature }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培时间:</strong
          >{{ patchInfo.zaipei.zaiPeiTime }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培水源:</strong
          >{{ patchInfo.zaipei.zaiPeiWaterSource }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">栽培备注:</strong
          >{{ patchInfo.zaipei.remark }}
        </p>
      </div>

      <div v-else-if="section === 'caishou'" class="info-section">
        <!-- 采收信息 -->
        <div class="image-container">
          <el-image
            v-if="imageList.caishouImage.length"
            :src="imageList.caishouImage[0]"
            class="patch-image"
            :preview-src-list="imageList.caishouImage"
          ></el-image>
        </div>
        <p>
          <strong style="color: #0037ff; font-size: 20px">管理任务名称:</strong
          >{{ patchInfo.caishou.caiShouManagementName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">采收描述:</strong
          >{{ patchInfo.caishou.caiShouDescription }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">展示名称:</strong
          >{{ patchInfo.caishou.caiShouDisplayName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">采收时间:</strong
          >{{ patchInfo.caishou.caiShouTime }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">采收类型:</strong
          >{{ patchInfo.caishou.caiShouType }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">采收重量:</strong
          >{{ patchInfo.caishou.caiShouWeight }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">采收地点:</strong
          >{{ patchInfo.caishou.caiShouLocation }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">采收备注:</strong
          >{{ patchInfo.caishou.remark }}
        </p>
      </div>

      <div v-else-if="section === 'jiaGong'" class="info-section">
        <!-- 加工信息 -->
        <div class="image-container">
          <el-image
            v-if="imageList.jiaGongImage.length"
            :src="imageList.jiaGongImage[0]"
            class="patch-image"
            :preview-src-list="imageList.jiaGongImage"
          ></el-image>
        </div>
        <p>
          <strong style="color: #0037ff; font-size: 20px">管理任务名称:</strong
          >{{ patchInfo.jiaGong.jiaGongManagementName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工展示名称:</strong
          >{{ patchInfo.jiaGong.jiaGongDisplayName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工位置:</strong
          >{{ patchInfo.jiaGong.jiaGongLocation }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工流程描述:</strong
          >{{ patchInfo.jiaGong.jiaGongProcessDetails }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工来源:</strong
          >{{ patchInfo.jiaGong.jiaGongSource }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工时间:</strong
          >{{ patchInfo.jiaGong.jiaGongTime }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工类型:</strong
          >{{ patchInfo.jiaGong.jiaGongType }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">加工备注:</strong
          >{{ patchInfo.jiaGong.remark }}
        </p>
      </div>

      <div v-else-if="section === 'zhilijiance'" class="info-section">
        <!-- 质量检测信息 -->
        <div class="image-container">
          <el-image
            v-if="imageList.zhilijianceImage.length"
            :src="imageList.zhilijianceImage[0]"
            class="patch-image"
            :preview-src-list="imageList.zhilijianceImage"
          ></el-image>
        </div>
        <p>
          <strong style="color: #0037ff; font-size: 20px">任务管理名称:</strong
          >{{ patchInfo.zhilijiance.zhiLiJianCeManagementName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">检测项目:</strong
          >{{ patchInfo.zhilijiance.zhiLiJianCeTestName }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">检测过程描述:</strong
          >{{ patchInfo.zhilijiance.zhiLiJianCeTestProcess }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">检测结果:</strong
          >{{ patchInfo.zhilijiance.zhiLiJianCeTestResults }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">检测时间:</strong
          >{{ patchInfo.zhilijiance.zhiLiJianCeTime }}
        </p>
        <p>
          <strong style="color: #0037ff; font-size: 20px">检测备注:</strong
          >{{ patchInfo.zhilijiance.remark }}
        </p>
      </div>

      <div v-else>
        <p>该部分信息不存在</p>
      </div>
    </template>
    <template v-else>
      <div class="error-container">
        <i class="el-icon-warning-outline"></i>
        <p>该商品不存在</p>
      </div>
    </template>
  </div>
</template>

<script>
import { getPatchByQrCode } from "@/api/seedlingSys/patch";

export default {
  name: "PatchDetail",
  props: ["code", "section"],
  data() {
    return {
      patchInfo: null,
      imageList: {}, // 修改为对象来存储不同部分的图片列表
    };
  },
  created() {
    this.getPatchInfo(this.code);
  },
  methods: {
    getPatchInfo(code) {
      getPatchByQrCode(code)
        .then((response) => {
          if (response.code === 200) {
            this.patchInfo = response.data;
          } else {
            this.$message.error(response.msg || "获取数据失败");
          }
          // 处理图片字段
          this.imageList.patchImage = this.patchInfo.patchImage
            ? this.patchInfo.patchImage
                .split(",")
                .map((image) => "http://localhost:8080" + image.trim())
            : [];
          this.imageList.zhongmiaoImage = this.patchInfo.zhongmiao
            .zhongMiaoImage
            ? this.patchInfo.zhongmiao.zhongMiaoImage
                .split(",")
                .map((image) => "http://localhost:8080" + image.trim())
            : [];
          this.imageList.zaipeiImage = this.patchInfo.zaipei.zaiPeiImage
            ? this.patchInfo.zaipei.zaiPeiImage
                .split(",")
                .map((image) => "http://localhost:8080" + image.trim())
            : [];
          this.imageList.caishouImage = this.patchInfo.caishou.caiShouImage
            ? this.patchInfo.caishou.caiShouImage
                .split(",")
                .map((image) => "http://localhost:8080" + image.trim())
            : [];
          this.imageList.jiaGongImage = this.patchInfo.jiaGong.jiaGongImage
            ? this.patchInfo.jiaGong.jiaGongImage
                .split(",")
                .map((image) => "http://localhost:8080" + image.trim())
            : [];
          this.imageList.zhilijianceImage = this.patchInfo.zhilijiance
            .zhiLiJianCeImage
            ? this.patchInfo.zhilijiance.zhiLiJianCeImage
                .split(",")
                .map((image) => "http://localhost:8080" + image.trim())
            : [];
        })
        .catch((error) => {
          console.error("接口调用失败:", error);
          this.$message.error("获取数据失败");
        });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
/* 图片容器 */
.image-container {
  text-align: center;
  margin-bottom: 10px;
}
.patch-image {
  max-width: 100%; /* 图片自适应容器宽度 */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.error-container {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.error-container i {
  font-size: 48px;
  margin-bottom: 10px;
}

.info-section {
  background-color: white;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-section p {
  margin-bottom: 10px;
}
</style>
